<template>
  <aside :class="sidebarClasses" >
    <div class="logo-container" @click="toggleCollapse">
      <transition name="logo-fade" mode="out-in">
        <h1 v-if="!isCollapse" key="text" class="logo-text">图书管理系统</h1>
        <div v-else key="icon" class="logo-icon">
          <el-icon><Notebook /></el-icon>
        </div>
      </transition>
    </div>

    <el-scrollbar class="scrollbar-wrapper">
      <el-menu
          :default-active="activeMenu"
          :collapse="isCollapse"
          router
          background-color="#001529"
          text-color="#bfcbd9"
          active-text-color="#409EFF"
          class="menu"
          :collapse-transition="false"
          :unique-opened="true"
      >
        <!-- 图书管理子菜单 -->
        <el-sub-menu index="book-management" class="sub-menu">
          <template #title>
            <el-icon class="menu-icon"><Notebook /></el-icon>
            <span class="menu-title">图书管理</span>
          </template>
          <el-menu-item
              v-for="item in bookMenuItems"
              :key="item.index"
              :index="item.index"
              class="sub-menu-item"
          >
            {{ item.title }}
          </el-menu-item>
        </el-sub-menu>

        <!-- 用户管理子菜单 -->
        <el-sub-menu index="user-management" class="sub-menu">
          <template #title>
            <el-icon class="menu-icon"><User /></el-icon>
            <span class="menu-title">用户管理</span>
          </template>
          <el-menu-item
              v-for="item in userMenuItems"
              :key="item.index"
              :index="item.index"
              class="sub-menu-item"
          >
            {{ item.title }}
          </el-menu-item>
        </el-sub-menu>

        <!-- 借阅管理菜单项 -->
        <el-menu-item index="/MianLayout/borrow" class="menu-item">
          <el-icon class="menu-icon"><Reading /></el-icon>
          <template #title>
            <span class="menu-title">借阅管理</span>
          </template>
        </el-menu-item>
      </el-menu>
    </el-scrollbar>

    <!-- 折叠按钮 -->
    <div
        class="collapse-btn"
        @click="toggleCollapse"
        :title="collapseTooltip"
        :aria-label="collapseTooltip"
    >
      <el-icon class="collapse-icon">
        <component :is="collapseIcon" />
      </el-icon>
      <transition name="text-fade">

      </transition>
    </div>
  </aside>
</template>

<script setup>
import {ref, computed, readonly} from 'vue'
import {
  Notebook,
  User,
  Reading,
  Fold,
  Expand
} from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'

// 响应式数据
const isCollapse = ref(false)
const route = useRoute()

// 菜单数据配置
const bookMenuItems = [
  { index: '/MianLayout/book', title: '图书列表' },
  { index: '/MianLayout/bookAdd', title: '添加图书' },
]

const userMenuItems = [
  { index: '/MianLayout/userlist', title: '用户列表' }
]

// 计算属性
const activeMenu = computed(() => route.path)

const sidebarClasses = computed(() => [
  'sidebar',
  { 'is-collapse': isCollapse.value }
])

const collapseIcon = computed(() => isCollapse.value ? Expand : Fold)

const collapseTooltip = computed(() => isCollapse.value ? '展开菜单' : '收起菜单')

// 方法
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

// 暴露给父组件的方法（可选）
defineExpose({
  toggleCollapse,
  isCollapse: readonly(isCollapse)
})
</script>

<style scoped lang="scss">
.sidebar {
  width: 200px;
  height: 100vh;
  background: linear-gradient(135deg, #e0f2ff 0%, #c7e5ff 100%); /* 更明亮的渐变背景 */
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.1); /* 更柔和的阴影 */
  overflow: hidden;

  &.is-collapse {
    width: 64px;
  }
}

.logo-container {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a73e8; /* 更深的蓝色文字 */
  background: linear-gradient(135deg, #e0f2ff 0%, #c7e5ff 100%); /* 与侧边栏一致的渐变 */
  cursor: pointer;
  transition: background-color 0.28s ease;
  overflow: hidden;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* 添加轻微分割线 */

  &:hover {
    background: linear-gradient(135deg, #d4e9ff 0%, #b8ddff 100%);
  }

  .logo-text {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.5px;
  }

  .logo-icon {
    font-size: 24px;
    color: #1a73e8;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.menu {
  border-right: none;
  height: 100%;
  background-color: transparent !important; /* 透明背景 */

  .menu-item {
    transition: all 0.28s ease;
    position: relative;
    margin: 4px 8px; /* 增加间距 */
    border-radius: 4px; /* 圆角 */

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
      transform: scaleY(0);
      transition: transform 0.28s ease;
      border-radius: 0 4px 4px 0; /* 圆角 */
    }

    &:hover {
      background-color: rgba(26, 115, 232, 0.1) !important;
    }

    &.is-active {
      background-color: rgba(26, 115, 232, 0.15) !important;

      &::before {
        transform: scaleY(1);
      }
    }
  }

  .sub-menu {
    :deep(.el-sub-menu__title) {
      color: #3c4043; /* 添加文字颜色 */
      background-color: transparent !important; /* 透明背景 */

      &:hover {
        color: #1a73e8 !important;
        background-color: rgba(26, 115, 232, 0.1) !important;
      }
    }

    :deep(.el-sub-menu__title .menu-icon) {
      color: #5f6368; /* 图标颜色 */
    }

    :deep(.el-sub-menu__title .menu-title) {
      color: inherit; /* 继承父级颜色 */
    }

    /* 二级菜单弹出面板样式 */
    :deep(.el-menu) {
      background-color: #f8fbff !important; /* 浅色背景 */
      //border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    .sub-menu-item {
      min-width: auto;
      padding-left: 48px !important;
      color: #3c4043 !important; /* 文字颜色 */
      background-color: transparent !important;

      &:hover {
        color: #1a73e8 !important;
        background-color: rgba(26, 115, 232, 0.1) !important;
      }

      &.is-active {
        color: #1a73e8 !important;
        background-color: rgba(26, 115, 232, 0.15) !important;
      }
    }


  .menu-icon {
    font-size: 18px;
    margin-right: 8px;
    color: #5f6368; /* 图标颜色 */
    transition: all 0.28s ease;
  }

  .menu-title {
    font-size: 14px;
    font-weight: 500;
    color: #3c4043; /* 更深的文字颜色 */
  }


.collapse-btn {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #5f6368; /* 更深的图标颜色 */
  cursor: pointer;
  border-top: 1px solid rgba(0, 0, 0, 0.05); /* 更淡的分割线 */
  transition: all 0.28s ease;
  padding: 0 16px;
  background-color: rgba(255, 255, 255, 0.6); /* 半透明白色背景 */

  &:hover {
    background-color: rgba(26, 115, 232, 0.1);
    color: #1a73e8;
  }

  .collapse-icon {
    font-size: 18px;
    transition: transform 0.28s ease;
  }

  .collapse-text {
    margin-left: 8px;
    font-size: 12px;
    color: #5f6368;
  }
}

/* 保持原有的动画效果 */
.logo-fade-enter-active,
.logo-fade-leave-active {
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-fade-enter-from,
.logo-fade-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

.text-fade-enter-active,
.text-fade-leave-active {
  transition: all 0.28s ease;
}

.text-fade-enter-from,
.text-fade-leave-to {
  opacity: 0;
  transform: translateX(-10px);
}
    @media (max-width: 768px) {
      .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s ease;

        &.is-mobile-open {
          transform: translateX(0);
        }
  }
  }
  }
}
</style>